<script>
import {
  Document,
  FolderOpened,
  Key,
  MoreFilled,
  Tickets,
} from "@element-plus/icons-vue";
import { MindMapping } from "@icon-park/vue-next";
import request from "../../utils/Request.js";
// import store from "../../store/index.js";
import { ElMessage } from "element-plus";
import ApiView from "./ApiView.vue";
import MarkdownView from "./MarkdownView.vue";
import RtfView from "./RtfView.vue";
import MindMapView from "./MindMapView.vue";

export default {
  name: "View",
  components: {
    RtfView,
    MarkdownView,
    ApiView,
    MoreFilled,
    Document,
    Tickets,
    Key,
    FolderOpened,
    MindMapView,
    MindMapping,
  },
  created() {
    // console.log(this.$route.params.projectId);
    this.getDocList();
    this.getProjectName();
    this.readProject();
  },
  data() {
    return {
      projectName: "知识库名称",
      data: [
        {
          id: "12345",
          name: "文件",
          type: "rtf",
        },
        {
          name: "文件夹",
          children: [],
          type: "folder",
        },
        {
          name: "文件夹1",
          type: "folder",
          children: [
            {
              name: "文件",
              type: "markdown",
            },
            {
              name: "文件夹",
              children: [],
              type: "folder",
            },
            {
              name: "文件夹2",
              type: "folder",
              children: [
                {
                  name: "123",
                  type: "api",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
        class: (data, node) => {
          return "my-tree-node";
        },
      },
      moreVisibleList: new Array(7).fill(false),
      treeLoading: false,
      selectDocType: "",
      selectDocId: "",
      selectDocName: "",
    };
  },
  methods: {
    readProject() {
      // 浏览量 + 1
      // 先检查本地有没有浏览过
      let views = JSON.parse(localStorage.getItem("viewProjects"));
      if (views == null) {
        views = {};
      }
      if (
        views[this.$route.params.projectId] == undefined ||
        views[this.$route.params.projectId] == false
      ) {
        request({
          url: "/api/project/read/read/" + this.$route.params.projectId,
          method: "post",
        }).then(({ data }) => {
          if (data.code === 0) {
            views[this.$route.params.projectId] = true;
            localStorage.setItem("viewProjects", JSON.stringify(views));
          } else {
            ElMessage.error(data.msg);
          }
        });
      }
    },
    getDocList() {
      request({
        url: "/api/project/doc/list",
        method: "get",
        params: {
          projectId: this.$route.params.projectId,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data.code === 0) {
          this.data = data.data;
          this.treeLoading = false;
        } else if (data.code === 1502) {
          // console.log(data);
          this.$router.replace("/404");
        } else {
          ElMessage.error("加载文档列表时出现问题");
        }
      });
    },
    getProjectName() {
      request({
        url: "/api/project/project/name",
        method: "get",
        params: {
          id: this.$route.params.projectId,
        },
      }).then(({ data }) => {
        if (data.code === 0) {
          this.projectName = data.data;
          document.title = this.projectName;
        } else {
          ElMessage.error(data.msg);
        }
      });
    },
    openDoc(data) {
      if (data.type === "folder") return;

      this.selectDocType = data.type;
      this.selectDocId = data.id;
      this.selectDocName = data.name;

      document.title = this.selectDocName + " - " + this.projectName;
    },
  },
};
</script>

<template>
  <el-container style="height: 100%">
    <el-aside class="my-aside">
      <el-text size="large" style="color: #303133; font-weight: bold">
        <br />
        {{ projectName }}
        <br />
      </el-text>

      <el-divider />

      <el-tree
        ref="treeRef"
        :data="data"
        :props="defaultProps"
        empty-text="还没有任何文件，快去创建吧"
        style="background-color: rgb(245, 247, 249)"
        draggable
        v-loading="treeLoading"
        :allow-drop="
          (draggingNode, dropNode, type) => {
            return false;
          }
        "
        node-key="id"
      >
        <template #default="{ node, data }">
          <el-row
            style="width: 100%; text-align: left"
            @mouseover="moreVisibleList[node.id] = true"
            @mouseout="moreVisibleList[node.id] = false"
            class="my-row"
            @click="openDoc(data)"
          >
            <el-col :span="2">
              <el-icon size="large">
                <FolderOpened v-if="data.type === 'folder'" />
                <Key v-else-if="data.type === 'api'" />
                <Tickets v-else-if="data.type === 'markdown'" />
                <mind-mapping
                  theme="outline"
                  size="24"
                  fill="#9b9b9b"
                  strokeLinecap="square"
                  v-else-if="data.type === 'mindmap'"
                />
                <Document v-else />
              </el-icon>
            </el-col>

            <el-col :span="20">
              <el-text size="large">{{ node.label }}</el-text>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-aside>

    <el-main class="my-main">
      <el-text size="large" style="color: #303133; font-weight: bold">
        <h1 style="margin-left: 10px">{{ selectDocName }}</h1>
      </el-text>

      <el-divider v-show="selectDocName !== ''" />

      <ApiView v-if="selectDocType === 'api'" :id="selectDocId" />
      <MarkdownView
        v-else-if="selectDocType === 'markdown'"
        :id="selectDocId"
      />
      <RtfView v-else-if="selectDocType === 'rtf'" :id="selectDocId" />
      <MindMapView v-else-if="selectDocType === 'mindmap'" :id="selectDocId"/>
    </el-main>
  </el-container>
</template>

<style scoped>
.my-aside {
  height: 100vh;
  width: 500px;
  min-width: 200px;
  background-color: rgb(245, 247, 249);
  border-right-style: solid;
  border-right-color: #e9e9eb;
  border-right-width: 1px;
  text-align: center;
}

.my-main {
  height: 100vh;
}

.my-tree-node {
  height: 30px;
}

.my-row:hover {
  background-color: #fdf6ec;
}
</style>